<template>
    <div class="progress-circle">
        <svg width="100" height="100">
            <circle class="bg" cx="50" cy="50" r="45"></circle>
            <circle class="progress" cx="50" cy="50" r="45" :stroke-dasharray="circumference"
                :stroke-dashoffset="offset"></circle>
        </svg>
        <div class="text">
            <div>目前人数</div>
            <div class="percentage">{{ progress }}%</div>
        </div>
    </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
    name: "ProgressCircle",
    props: {
        progress: {
            type: Number,
            default: 0,
        },
    },
    setup(props) {
        const radius = 45;
        const circumference = 2 * Math.PI * radius;

        const offset = computed(() => {
            return circumference - (props.progress / 100) * circumference;
        });

        return {
            circumference,
            offset,
        };
    },
};
</script>

<style scoped>
.progress-circle {
    position: relative;
    width: 100px;
    height: 100px;
}

.progress-circle svg {
    transform: rotate(-90deg);
}

.progress-circle circle {
    fill: none;
    stroke-width: 10;
}

.progress-circle .bg {
    stroke: #d3d3d3;
}

.progress-circle .progress {
    stroke: #4d5bf9;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s;
}

.progress-circle .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #4d5bf9;
}

.progress-circle .text .percentage {
    font-size: 20px;
    font-weight: bold;
}
</style>
